<template>
  <div>
    <MyHeaderVue :background="'blue'" title="tabbar案例"></MyHeaderVue>
    <div class="concent">
      <component :is="comData" >

      </component>
    </div>
    <MyTabBarVue :arr="tabList" @contentName="comBtn"></MyTabBarVue>
  </div>
</template>

<script>
  import MyHeaderVue from './components/MyHeader.vue';
  import MyTabBarVue from './components/MyTabBar.vue';
  import MyGoodsList from './components/views/MyGoodsList.vue';
  import MyGoodsSearch from './components/views/MyGoodsSearch.vue';
  import MyUserInfo from './components/views/MyUserInfo.vue';
export default {
  components:{
    MyHeaderVue,
    MyTabBarVue,
    MyGoodsList,
    MyGoodsSearch,
    MyUserInfo
  },
  data(){
    return{
      tabList: [
    {
        iconText: "icon-shangpinliebiao",
        text: "商品列表",
        componentName: "MyGoodsList"
    },
    {
        iconText: "icon-sousuo",
        text: "商品搜索",
        componentName: "MyGoodsSearch"
    },
    {
        iconText: "icon-user",
        text: "我的信息",
        componentName: "MyUserInfo"
    }
],
      comData:'MyGoodsList'
    }
  },methods:{
    comBtn(comName){
      this.comData=comName
    }
  }
}
</script>

<style>
  .concent{
    margin-top: 45px;
    margin-bottom: 50px;
  }
</style>